<template>

	<view class=" content">

		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>

		<view class="" v-if="postData">
			<view class="code-box ">
				<image :src="postData.img" mode=""></image>
				<view class="title text-center basis-xll ">
					2021/8/21/16:00-2021/8/21/17:00
				</view>
			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">访客姓名</view>
				<view class="flex align-center right-title">
					张三
				</view>
			</view>

			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">到访地址</view>
				<view class="flex align-center right-title">
					{{postData.address}}
				</view>
			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">到访时间</view>
				<view class="flex align-center right-title">
					{{postData.end_time}}
				</view>
				
				
			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">车牌号码</view>
				<view class="flex align-center right-title">
					{{postData.car_number}}
				</view>
			</view>
			<view class="middle">
				<view class="button-box middle" @click="Navigation()">
					分享
				</view>
			</view>

		</view>
	</view>





</template>

<script>
	import cuCustom from '../components/header/cu_custom.vue'

	import {
		getInviteInfo
	} from "@/static/server/api/api.js"
	export default {
		components: {
			cuCustom,

		},
		data() {
			return {
				list: null,
				title: "访客详情",
				modalName: null,
				postData: null,
				id:-1,

			}
		},
		onLoad(option) {
			this.id=option.id;
			this.getInfo(option.id);
		},
		mounted() {

		},
		methods: {
			getInfo(id) {
				getInviteInfo(id).then(r => {

					this.postData = r;

				})

			},
			/**
			 * 分享
			 */
			share() {
				
				
			},
			/**
			 * 位置导航
			 */
			Navigation(){
				// uni.navigateTo({
				// 	url: "./position?id="+this.id
				// })
			},
			
			/**
			 * 取消分享
			 */
			cancel() {
				this.modalName = null;
			}





		}


	}
</script>

<style scoped>
	@import url("@/static/server/css/basic.css");
	@import url("@/static/server/css/icon.css");


	.bg-F9F9F9 {
		background-color: #F9F9F9;
		min-height: 100vh;
	}

	.code-box {
		margin: 34rpx auto 66rpx;
		width: calc(100vw*(327/375));
		height: calc(100vw*(327/375));
		border-radius: 16rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0, 0, 0, 0.1);
		font-family: Arial;
	}

	.code-box image {
		width: calc(100vw*(250/375));
		height: calc(100vw*(250/375));
		margin: 54rpx auto 30rpx;
	}

	.code-box .title {
		color: rgba(151, 151, 151, 100);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}

	.from-box {
		margin-top: 16rpx;
	}

	.form-item {
		width: 100vw;
		padding-left: 32rpx;
		padding-right: 32rpx;
		height: calc(100vw*(48/375));
	}

	.form-item .title {
		color: rgba(36, 40, 46, 0.50);
		font-size: 32rpx;
		text-align: left;

		font-family: SourceHanSansSC-regular;
	}

	.form-item .right-title {
		color: rgba(36, 40, 46, 0.50);
		font-size: 32rpx;
		font-family: SourceHanSansSC-regular;
	}

	.cuIcon-right-box {
		margin-left: 16rpx;
	}

	.cuIcon-right-box,
	.cuIcon-right {
		width: calc(100vw*(16/375));
		height: calc(100vw*(16/375));
		color: rgba(36, 40, 46, 0.50);
		font-size: 24rpx;
		line-height: calc(100vw*(16/375));
	}

	.switch-box {
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: calc(100vw*(44/375));
		height: calc(100vw*(20/375));
	}

	.switch-hover {
		position: relative;
		background-color: rgba(57, 81, 251, 100);
	}

	.switch-hover .point {
		position: absolute;
		right: 10rpx;
		background-color: white;
	}

	.switch-nohover {
		background-color: rgba(36, 40, 46, 0.50);
		;
	}

	.switch-nohover .point {

		background-color: white;
	}

	.switch-box .point {
		border-radius: 50%;
		width: calc(100vw*(10/375));
		height: calc(100vw*(10/375))
	}




	.button-box {
		border-radius: 16rpx;
		background-color: rgba(57, 81, 251, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 32rpx;
		text-align: center;
		font-family: SourceHanSansSC-regular;
		height: calc(100vw*(48/375));
		width: calc(100vw*(343/375));
		margin-top: calc(100vw*(36/375));
		margin-bottom: 50rpx;


	}

	
</style>
